<template>
  <x-drawer :visible.sync="couponVisible" title="优惠券" cancel round @cancel="closeCouponVisible">
    <view class="p-drawer">
      <scroll-view v-if="couponList && couponList.length" class="_scroll" scroll-y="true">
        <view class="_coupon" v-for="item in couponList" :key="item.userCouponId">
          <view class="list">
            <view class="_top">
              <view class="_lf">
                <view>
                  <text style="font-size: 14px;font-weight: bold;">¥</text>
                  <text style="font-size: 20px;font-weight: bold;">
                    {{ item.couponAmount }}
                  </text>
                </view>
                <view v-if="item.transactionAmount && item.couponType === 1">满{{ item.transactionAmount }}元可用</view>
                <view v-else>无门槛</view>
              </view>
              <view class="_rt">
                <view class="flex1">
                  <view class="_name">{{ item.couponType === 1 ? '满减券' : '直减券' }}</view>
                  <view class="_time">{{ item.couponValidity }}</view>
                </view>
              </view>
              <view class="_r">
                <template v-if="select">
                  <view v-if="item.disabled" class="_tag">不可用</view>
                  <view v-else-if="value === item.userCouponId" class="_tag">已选择</view>
                  <view v-else class="_tag is-optional" @click.stop="handleChange(item)">立即使用</view>
                </template>
                <view v-else class="_tag">已领取</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </x-drawer>
</template>

<script>
import XDrawer from '@/components/x-drawer';

export default {
  name: 'PDrawerCoupon',
  components: {
    XDrawer
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    value: {
      type: [String, Number],
      default: ''
    },
    select: {
      type: Boolean,
      default: false
    },
    couponList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      couponVisible: this.visible
    };
  },
  created() {},
  methods: {
    //  关闭分享弹框
    closeCouponVisible() {
      this.$emit('update:visible', false);
      this.$emit('close');
    },
    handleChange(item) {
      this.$emit('change', item);
      this.$emit('update:visible', false);
    }
  }
};
</script>

<style lang="scss" scoped>
.p-drawer{
  padding-bottom: env(safe-area-inset-bottom);
  width: 100%;
  min-height: 800px;
  max-height: 1000px;
  ._scroll{
    min-height: 680px;max-height: 880px;
    ._coupon {
      width: 700px;
      background: #FFECEC;
      border-radius: 6px;
      margin: 0 auto;
      margin-bottom: 24px;

      .list {
        display: flex;
        flex-direction: column;
        border-radius: 6px;
        background: #FFECEC;
        margin-bottom: 24px;
        overflow: hidden;

        ._top {
          display: flex;
          min-height: 152px;

          ._lf {
            width: 166px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: relative;
            border-right: 1px dashed rgba(235, 68, 31, 0.4);
            padding: 48px 20px 36px 20px;
            font-size: 20px;
            color: #EB441F;
          }

          ._lf:before {
            content: "";
            position: absolute;
            width: 18px;
            height: 18px;
            border-radius: 18px;
            background: #FFFFFF;
            right: -9px;
            top: -9px;
          }

          ._lf:after {
            content: "";
            position: absolute;
            width: 18px;
            height: 18px;
            border-radius: 18px;
            background: #FFFFFF;
            right: -9px;
            bottom: -9px;
          }

          ._rt {
            //position: relative;
            flex: 1;
            display: flex;
            border-radius: 0 6px 6px 0;
            padding: 34px 36px 34px 16px;
            color: #EB441F;
            font-size: 24px;
            align-items: center;

            ._name {
              font-weight: bold;
              font-size: 28px;
              margin-bottom: 12px;
            }
            ._time{ font-size: 22px;}
          }
          ._r{ display: flex; align-items: center; padding-right: 10px;}
          ._tag{
            border: 2px solid #F7A99A; color: #F7A99A; border-radius: 50px; padding: 10px 0; font-size: 28px; width: 150px; text-align: center;
            &.is-disabled,
            &.is-optional{ color: #fff; background-color: $uni-color-primary; border-color: $uni-color-primary;}
          }
        }
      }
    }
    ._coupon:last-child{
      margin-bottom: 0;
    }
  }
}
</style>
